<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>外边距</title>
        <style type="text/css">
            h3 { text-align: center ; }
            .wrapper { font-size: 30px ;  border: 1px dotted blue ; }

            /* 亲子选择器 ( 大于号之前是 亲爸 ，大于号之和是亲儿子 )*/
            .first>div {
                background: #dedede ;
                height: 100px ;
                margin-top: 50px ;
                margin-right: 50px ;
                margin-bottom: 50px ;
                margin-left: 50px ;
            }

            /* 亲子选择器 ( 大于号之前是 亲爸 ，大于号之和是亲儿子 )*/
            .second>div {
                background: #ff0 ;
                height: 100px ;
                margin: 50px ;
            }

            /* 亲子选择器 ( 大于号之前是 亲爸 ，大于号之和是亲儿子 )*/
            .third>div {
                background: #dedede ;
                height: 100px ;
                margin-top: 50px ;
                margin-right: 100px ;
                margin-bottom: 50px ;
                margin-left: 100px ;
            }

            /* 亲子选择器 ( 大于号之前是 亲爸 ，大于号之和是亲儿子 )*/
            .fourth>div {
                background: #ff0 ;
                height: 100px ;
                margin: 50px 100px ;
            }

            /* 亲子选择器 ( 大于号之前是 亲爸 ，大于号之和是亲儿子 )*/
            .fifth>div {
                background: #ff0 ;
                height: 100px ;
                margin: 10px 30px 50px 70px ;
            }

        </style>
    </head>
    <body>

        <h3>外边距</h3>

        <div class="wrapper first">
            <div>1</div>
        </div>

        <div class="wrapper second">
            <div>2</div>
        </div>

        <div class="wrapper third">
            <div>3</div>
        </div>

        <div class="wrapper fourth">
            <div>4</div>
        </div>

        <div class="wrapper fifth">
            <div></div>
        </div>
        
    </body>
</html>